<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>家长上岗证</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">

		
		<style type="text/css">
			
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
			
		</style>
	</head>
	<body>
		<!-- HEADER BAR STAERTS -->
		<header class="mui-bar mui-bar-nav bg-default">
		<div class="mui-row">
			<div class="mui-col-xs-2">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left bg-default" style="padding-top: 6px;padding-bottom: 0px;"></a>
			</div>
			<div class="mui-col-xs-9">
				<h1 class="mui-title">家长上岗测试 报告</h1>
			</div>
			<div class="mui-col-xs-1">
            	<!--<span class="icon-share" style="line-height: 45px;"> </span>-->
			</div>
		</header>
		<!-- HEADER BAR ENDS -->
		<!-- Navigation bar starts -->

		<!-- Navigation bar ends -->

		<div class="mui-content">
			
			<div class="mui-card">
			
			
				<div class="mui-card-header">
					<h4>家长上岗证测试</h4>
				</div>
				<div class="mui-card-content">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<div class="mui-content-padded">
								<div class="chart" id="scoreChart"></div>
							</div>
						</div>
						<!--<div class="mui-col-xs-8">
							<div class="mui-content-padded">
								<div class="chart" id="barChart"></div>
							</div>
		        		</div>-->
					</div>
					<div class="mui-row">
						<div class="mui-card ">
							<div class="mui-card-content text-block">
								<div class="note note-danger" id="level4">
	                                <h4 class="block">不及格，您需要再学习学习课程！</h4>
	                            </div>							
			        		</div>
						</div>
					</div>
						
				</div>
				<div class="mui-card-footer">
					<span>测评时间：2016-12-01 16:10:09.923</span><span><a href="/rest/test/exam/1"> 重测</a></span>
				</div>
            
			</div>
		</div>
		<footer>

		</footer>

		<!-- Slider Ends -->

		<!-- Javascript files -->
		<!-- jQuery -->
		<!-- Bootstrap JS -->
		<!--<script type="text/javascript" src="/plug-in/bootstrap/js/bootstrap.min.js"></script>-->
		<!-- APP JS -->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/plugin/echarts-all.js"></script>
		<script>
			var byId = function(id) {
				return document.getElementById(id);
			};
			
			var scored = 10.0;
			if (scored < 0) {
				scored = 0;
			}
			var less = 127.0 - scored;
			
			initScoreChart(scored,less);
			function initScoreChart(scored,less) {
				var scoreOption = {
					series: [{
						name: '本次得分',
						type: 'pie',
						radius: ['80%', '90%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								position: 'center',
								textStyle: {
									fontSize: '14',
									fontWeight: 'bold'
								}
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '30',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: [{
							value: scored,
							name: scored,//
							itemStyle:{normal:{color:"#00a8c6"}}
						}, {
							value: less,
							name: '',
							itemStyle:{normal:{color:"#ECFFFF"}}
						}, ]
					}]
				};
				var scoreChart = echarts.init(byId('scoreChart'));
				scoreChart.setOption(scoreOption);
			}

		</script>
	</body>
</html>
